<template>
  <div class="add_hospital_page">

    <div class="nav_bar">
      <div class="back" @click="goBack">
        <span class="el-icon-arrow-left"></span>
        <span>返回</span>
      </div>

      <div class="top_menus">
        <div class="menu_cell" :class="step == item.id ? 'menu_cell_active' : ''" v-for="(item, index) in menus" :key="index" @click="menuEvent(item)">{{ item.name }}</div>
      </div>
    </div>

    <!-- 基础信息 开始 -->
    <div class="content" v-show="step == 1">
      <el-form ref="addForm" :model="addForm" :rules="addFormRules" class="add_form" size="small" :label-width="labelWidth">
        <el-form-item label="医院名称：" prop="hospitalName">
          <el-input v-model.trim="addForm.hospitalName"></el-input>
        </el-form-item>
        <el-form-item label="成立时间：" prop="establishDate">
          <el-date-picker v-model="addForm.establishDate" type="date" class="a_input" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="门店地址：" class="long_form_item is-required">
          <div class="address_box">
            <el-form-item prop="code" label-width="0">
              <area-select v-model="addForm.code" @change="onProvinceChange"></area-select>
            </el-form-item>
            <el-form-item prop="address" label-width="0">
              <el-input v-model.trim="addForm.address" placeholder="请输入详细地址" class="a_input" maxlength="100" />
            </el-form-item>
          </div>
        </el-form-item>
        <el-form-item label="医院logo：">
          <ImageUpload v-model="addForm.hospitalLogo"></ImageUpload>
        </el-form-item>
        <el-form-item label="文字logo：">
          <el-input v-model.trim="addForm.textLogo" maxlength="4"></el-input>
          <div class="input_tips">如果没有logo，可填写3-4个字自动生成文字logo</div>
        </el-form-item>
        <el-form-item label="营业执照：">
          <ImageUpload class="license_upload" v-model="addForm.businessLicense"></ImageUpload>
        </el-form-item>
        <el-form-item label="" label-width="0">
          <el-form-item label="营业期限：">
            <el-input v-model.trim="addForm.businessTerm"></el-input>
          </el-form-item>
          <el-form-item label="统一社会编码：">
            <el-input v-model.trim="addForm.businessLicenseNumber"></el-input>
          </el-form-item>
          <el-form-item label="法人：" prop="legalPerson">
            <el-input v-model.trim="addForm.legalPerson"></el-input>
          </el-form-item>
          <el-form-item label="注册资金：" prop="registeredCapital">
            <el-input v-model.trim="addForm.registeredCapital"></el-input>
          </el-form-item>
          <el-form-item label="经营范围：">
            <el-input type="textarea" v-model.trim="addForm.businessScope" rows="3" resize="none"></el-input>
          </el-form-item>
        </el-form-item>
        <el-form-item label="医疗许可证：">
          <ImageUpload class="license_upload" v-model="addForm.practiceLicense"></ImageUpload>
        </el-form-item>
        <el-form-item label="" label-width="0">
          <el-form-item label="证件有效期：">
            <el-input v-model.trim="addForm.licenseValidity"></el-input>
          </el-form-item>
          <el-form-item label="医院资质：">
            <el-input v-model.trim="addForm.hospitalQualification"></el-input>
          </el-form-item>
          <el-form-item label="治疗科目：">
            <el-input type="textarea" v-model.trim="addForm.treatmentSubject" rows="3" resize="none"></el-input>
          </el-form-item>
        </el-form-item>
        <el-form-item label="更多介绍：" class="long_form_item">
          <!-- <el-input type="textarea" v-model="addForm.detailIntroduce" rows="5" resize="none"></el-input> -->
          <WangEditor v-model="addForm.detailIntroduce"></WangEditor>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="nextStep">保存，下一步</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 基础信息 end -->

    <!-- 平台运营 开始 -->
    <div class="content" v-show="step == 2">
      <el-form :model="addForm" ref="secondForm" :rules="secondFormRules" class="" size="small" :label-width="labelWidth">
        <el-form-item label="上架状态：" class="" prop="onShelf">
          <el-radio-group v-model="addForm.onShelf">
            <el-radio :label="1">上架</el-radio>
            <el-radio :label="2">下架可见</el-radio>
            <el-radio :label="0">下架不可见</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="排序时间：" class="" prop="orderTime">
          <el-date-picker v-model="addForm.orderTime" type="date" class="a_input" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-form-item label="seo标题：" class="" prop="seoTitle">
          <el-input v-model.trim="addForm.seoTitle" class="a_input"></el-input>
        </el-form-item>
        <el-form-item label="seo关键词：" class="" prop="seoKeywords">
          <el-input type="textarea" v-model.trim="addForm.seoKeywords" class="a_area" rows="3" resize="none"></el-input>
        </el-form-item>
        <el-form-item label="seo描述：" class="" prop="seoDescription">
          <el-input type="textarea" v-model.trim="addForm.seoDescription" class="a_area" rows="3" resize="none"></el-input>
        </el-form-item>
        <el-form-item label="" class="long_form_item">
          <el-button type="primary" :loading="loading" @click="saveInfo">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 平台运营 end -->

</div>
</template>
<script>
import AreaSelect from "@/components/province";
import AddressMap from "@/components/map";
import ImageUpload from "@/components/upload/upload.vue";
import WangEditor from "@/components/wangEditor/index.vue";
import { BASEURL, ADD_QUALIFICATION_HOSPITAL_INFO, EDIT_QUALIFICATION_HOSPITAL_INFO, GET_QUALIFICATION_HOSPITAL_INFO } from '@/http/information'
import { deepClone, showToast } from "@/common/util";
export default {
  components: {
    AreaSelect,
    AddressMap,
    ImageUpload,
    WangEditor,
  },
  data() {
    return {
      menus: [
        { name: "基础信息", id: 1 },
        { name: "平台运营", id: 2 },
      ],
      step: 1,
      addForm: {},
      labelWidth: "120px",
      addFormRules: {
        hospitalName: [{ required: true, message: '请输入医院名称', trigger: 'blur' }],
        establishDate: [{ required: true, message: '请输入成立时间', trigger: 'blur' }],
        code: [{ required: true, message: '请选择门店地址', trigger: 'change' }],
        address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
        legalPerson: [{ required: true, message: '请输入法人', trigger: 'blur' }],
        registeredCapital: [{ required: true, message: '请输入注册资金', trigger: 'blur' }],
      },
      secondFormRules: {
        onShelf: [
          { required: true, message: "请选择上架状态", trigger: "change" },
        ],
        homePageShow: [{ required: true, message: "请选择是否首页", trigger: "change" }],
        initReadCnt: [{ required: true, message: "请输入初始阅读数", trigger: "blur" }],
        orderTime: [
          { required: true, message: "请输入排序时间", trigger: "blur" },
        ],
        seoTitle: [
          { required: true, message: "请输入seo标题", trigger: "blur" },
        ],
        seoKeywords: [
          { required: true, message: "请输入seo关键词", trigger: "blur" },
        ],
        seoDescription: [
          { required: true, message: "请输入seo描述", trigger: "blur" },
        ],
      },
      loading: false
    };
  },
  created() {
    let query = this.$route.query;
    if (query.id) {
      this.getInfo(query.id);
    }
  },
  methods: {
    // 菜单点击事件
    menuEvent(row) {
      this.nextStep(row.id);
    },

    // 返回上一页
    goBack() {
      this.$router.go("-1");
    },

    // 下一步
    nextStep(num) {
      let _this = this;
      let step = this.step;
      if (step == 1) {
        this.$refs.addForm.validate(valid => {
          if (!valid) {
            return false;
          }
          _this.step = 2;
        })
        return false;
      }
      _this.step = num
    },

    // 获取详情
    getInfo(id) {
      let oParams = {};
      oParams.id = id;
      GET_QUALIFICATION_HOSPITAL_INFO(oParams).then((res) => {
        let obj = res.data || {};

        // 医院logo
        if (obj.hospitalLogo && obj.hospitalLogo.length) {
          obj.hospitalLogo = obj.hospitalLogo.split(',');
        }

        // // 营业执照
        // if (obj.businessLicense && obj.businessLicense.length) {
        //   obj.businessLicense = obj.businessLicense.split(',');
        // }

        // // 医疗许可证
        // if (obj.practiceLicense && obj.practiceLicense.length) {
        //   obj.practiceLicense = obj.practiceLicense.split(',');
        // }
        obj.code = [obj.province, obj.city, obj.district]


        this.addForm = obj;
      });
    },

    // 获取参数
    getParams() {
      let o = deepClone(this.addForm);

      // 医院logo
      if (o.hospitalLogo) {
        o.hospitalLogo = o.hospitalLogo.toString();
      }


      // // 营业执照
      // if (o.businessLicense && o.businessLicense.length) {
      //   o.businessLicense = o.businessLicense;
      // }

      // // 医疗许可证
      // if (o.practiceLicense && o.practiceLicense.length) {
      //   o.practiceLicense = o.practiceLicense;
      // }

      // 省市区
      if (o.code && o.code.length) {
        o.province = o.code[0]
        o.city = o.code[1]
        o.district = o.code[2]
        delete o.code;
      }

      return o;
    },

    // 保存信息
    saveInfo() {
      let _this = this;
      let query = _this.$route.query;
      this.$refs.secondForm.validate((valid) => {
        if (!valid) {
          return false;
        }
        let oParams = _this.getParams();
        console.log(oParams);
        _this.loading = true;

        // 编辑
        if (query.id) {
          oParams.id = query.id;
          EDIT_QUALIFICATION_HOSPITAL_INFO(oParams).then((res) => {
            _this.loading = false;
            if (res.code == 200) {
              showToast({
                message: "编辑成功",
                type: "success",
              });
              _this.goBack();
            }
          });
          return false;
        }

        // 新增
        ADD_QUALIFICATION_HOSPITAL_INFO(oParams).then((res) => {
          _this.loading = false;
          if (res.code == 200) {
            showToast({
              message: "新增成功",
              type: "success",
            });
            _this.goBack();
          }
        });
      });
    },

    // 监听省市区
    onProvinceChange(e) {
      this.$set(this.addForm, 'provinceName', e[0])
      this.$set(this.addForm, 'cityName', e[1])
      this.$set(this.addForm, 'districtName', e[2])
    }

  },
};
</script>
<style lang="scss" scoped>@import "@/assets/style/addHospital.scss";</style>